<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useTableStoreHook } from "@renderer/store/modules/table";

const tableStore = useTableStoreHook();

// 固定表格高度，监听变化
const cardRef = ref();
const tableHeight = ref(0);
onMounted(() => {
  tableHeight.value = (cardRef.value.$el.clientHeight - 58 - 40) / tableStore.tableDatas.length - 6;
  addEventListener("resize", () => {
    tableHeight.value =
      (cardRef.value.$el.clientHeight - 58 - 40) / tableStore.tableDatas.length - 6;
  });
});
watch(
  () => tableStore.tableDatas,
  () => {
    tableHeight.value =
      (cardRef.value.$el.clientHeight - 58 - 40) / tableStore.tableDatas.length - 6;
  }
);

function test() {
  tableStore.updateCeil("槽宽", "3", "高度", "A", 100);
}
</script>

<template>
  <el-card ref="cardRef" class="card" header="分档数据统计" @click="test">
    <el-table
      v-for="tb in tableStore.tableDatas"
      :key="tb.tableName"
      border
      stripe
      :height="tableHeight"
      :data="tb.data"
      class="statistic-table"
    >
      <el-table-column
        v-for="(row, index) in tb.rows"
        :key="row"
        :width="index === 0 ? '88px' : undefined"
        min-width="32px"
        :label="row"
        :prop="row"
        align="center"
      />
    </el-table>
  </el-card>
</template>

<style scoped lang="scss">
.card {
  height: calc(100% - 2px);
}

.statistic-table {
  margin-bottom: 12px;
  width: 100%;
}
</style>
